<#include '/admin/header.html' > 
<script type="text/javascript" src="${ctx}/adminthemes/new/js/china.js"></script>
<style type="text/css">
#container {
    height: 570px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}
tr td{
	padding-right: 10px;
}
td select{
	height: 25px;
}
.tab li{
		border-bottom: 1px solid #ccc;
        margin-right: 0px;
        padding: 0px 10px;
	}
</style>

<div class="admin-main">
<div class="table_control">
	<div style="display: block;" class="searchAdvanced">
		<input id="Advanced" name="Advanced" type="hidden" value="0" />
		<table width="98%" border="0" cellspacing="0" cellpadding="8">
			<tr style="float: right; line-height: 47px;" >
				<td width="100">
					按订单周期：
				</td>
				<td width="90" >
					<select id="cycle_type" onchange="statistics_mode(this.value)" >
						<option value="1">按照月统计</option>
						<option value="0">按照年统计</option>
					</select>
				</td>
				<td width="70" >
					<select id="year">
					</select>
				</td>
				<td width="70" >
					<select id="month">
					</select>
				</td>
				<td width="200" style="text-align: center;">
					<a id="search_statis"  href="javascript:void(0);"	class="layui-btn layui-btn-normal layui-btn-small">开始搜索</a>
				</td>
				<td></td>
			</tr>
		</table>
	   </div>
	</div>
	<div class="clear height10"></div>
	
	<div class="input">
		<div style="display: block;" class="goods_input">
		
			<!-- Tab -->
			<div class="outcont" style="width: 100%">
				<div class="contentTab" style="float: left;">
					<ul class="tab" style="width:1200px;height:40px;">
						<li class="contentTabS" statistics="1" style="width:6%;">下单会员</li>
						<li class="" statistics="2" style="width:5%;">下单量</li> 
						<li class="" statistics="3" style="width:8%;">下单金额</li> 
							<div style="width:65%;height:47px;float:left;border-bottom:1px solid #ccc;"></div>
					</ul>
				</div>
				
			</div>
			<!-- tab-page -->
			<div class="shadowBoxWhite wf100 whiteBox">
				<div class="text">
					<div class="tab-page">
						<div class="tab-panel">
							<table class="form-table" style="width: 100%;">
								<tr>
									<td>
										<div id="main" style="width: 100%;height:800px;"></div>		 
									</td>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>
			
		</div>
	</div>
	<!-- 区域分析表格 -->
	<div class="shadowBoxWhite tableDiv">
		<form id="regionForm">
			<table class="layui-table site-table table-hover" id="regionData">
				<thead>
					<tr>
						<th>省份</th>
						<th>下单会员</th>
						<th>下单量</th>
						<th>下单金额</th>
					</tr>
				</thead>
			</table>
		</form>
	</div>
</div>

<script type="text/javascript">
$(function () {
	
	//设置时间
	var currentYear = new Date().getFullYear();
	var historyYear = currentYear-10;
	
	var currentmonth = new Date().getMonth();
	currentmonth+=1;
	
	//填充年
	for(var i=0;i<20;i++){
		if(currentYear==historyYear){
			$("#year").append("<option value='"+historyYear+"' selected='selected' >"+historyYear+"年</option>" );
		}else{
			$("#year").append("<option value='"+historyYear+"' >"+historyYear+"年</option>" );
		}
		historyYear++;
	}
	
	//填充月份
	for(var i=1;i<=12;i++){
		if(currentmonth==i){
			$("#month").append("<option value='"+i+"' selected='selected' >"+i+"月</option>" );
		}else{
			$("#month").append("<option value='"+i+"' >"+i+"月</option>" );
		}
	}
	
	//生成下单会员数区域分析图
	var cycle_type = $("#cycle_type :selected").val();
    var d = new Date();
	regionOrderStatistics(1,cycle_type,d.getFullYear(),d.getMonth() + 1)
	
	table = $('#regionData').DataTable({
		"language": {
	        "url": "${staticserver}/media/zh_CN.txt"
	    },
	    "processing": true,
	    "autoWidth": true,
	    "serverSide": true,
	    "initComplete": function(settings, json) {
	    	 $(".dataTables_paginate").on("click", "a", function() {
	    		 if($('#goodsdata_processing')[0].style.display=="block"){
					  $(".dataTables_paginate li").addClass("disabled");
				  }  
	         });   
		 },
	    "ordering": false,
	    "paging": false,
	    "searching": false,
	    "lengthChange": false,
	    ajax: {
	        //指定数据源
	        type:"post",
	        url: '${ctx}/shop/admin/regionOrderStatistics/region-list-json.do',
	    },

	    columns: [ //定义列 
	        {data: "local_name"},     
	        {data: "member_num"},
	        {data: "order_num"},
	        {data: "order_price"} 
	     ]
	});  
	
	//开始搜索
	$("#search_statis").click(function(){
		refresh_data();
	});
	
});

//切换Tab页
$(".contentTab>ul>li").click(function(){
 	var tabid=$(this).attr("statistics");
 	$(".contentTab>ul>li").removeClass("contentTabS");
 	$(this).addClass("contentTabS");
 	
 	//刷新数据
 	refresh_data();
});
 
 //tab选项卡按钮样式
	
 	$(".tab li").eq(0).css({"border-bottom":"white","border-left":"1px solid #ccc","border-top":"1px solid #ccc","border-right":"1px solid #ccc"})
		$(".tab li").click(function(){
			$this=$(this);
			$this.css({"border-bottom":"white","border-left":"1px solid #ccc","border-top":"1px solid #ccc","border-right":"1px solid #ccc"}).siblings("li").css({"border-top":"white","border-bottom":"1px solid #ccc","border-right":"white","border-left":"white"})
		})

//查询区域分析图
function regionOrderStatistics(tabid,cycle_type,year,month){
	$.ajax({
		url : "${ctx}/shop/admin/regionOrderStatistics/region-type-list-json.do",
		data:{'type':tabid,'cycle_type':cycle_type,'year':year,'month':month},
		type : "POST",
		dataType : 'json',
		success : function(result) {
			if(tabid==1){
				regionStatistics(result.message,"下单会员");
			}else if(tabid==2){
				regionStatistics(result.message,"下单量");
			}else{
				regionStatistics(result.message,"下单金额");
			}
			
		},
		error : function(e) {
			$.Loading.error("出现错误 ，请重试");
		}
	});
}

//设置区域分析图
function regionStatistics(data,name){

	var myChart = echarts.init(document.getElementById('main'));
	option = {
		    title: {
		        text: '区域分析统计',
		        subtext: '',
		        left: 'center'
		    },
		    tooltip: {
		        trigger: 'item'
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data:[]
		    },
		    visualMap: {
		        min: 0,
		        max: 2500,
		        left: 'left',
		        top: 'bottom',
		        text: ['高','低'],         
		        calculable: true
		    },
		    toolbox: {
		        show: true,
		        orient: 'vertical',
		        left: 'right',
		        top: 'center',
		        feature: {
		            restore: {},
		            saveAsImage: {}
		        }
		    },
		    series: [
		        {
		            name: name,
		            type: 'map',
		            mapType: 'china',
		            roam: false,
		            label: {
		                normal: {
		                    show: true
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:data
		           
		        }	
		    ]
		};
	myChart.setOption(option);
	
}

//设置订单周期
function statistics_mode(mode_value){
	if(mode_value==1){
		$("#month").show();
	}else{
		$("#month").hide();
	}
	refresh_data();
}

//刷新数据
function refresh_data(){
	debugger
	var cycle_type = $("#cycle_type :selected").val();
	var year = $("#year :selected").val();
	var month = $("#month :selected").val();
	//区域分析
	var tabid=$(".contentTabS").attr("statistics");
	regionOrderStatistics(tabid,cycle_type,year,month);
	
	var param ="type="+tabid+"&cycle_type="+cycle_type+"&year="+year+"&month="+month;
	var url = table.ajax.url("${ctx}/shop/admin/regionOrderStatistics/region-list-json.do?"+param);
	url.load();
}

</script>
